import { onMounted, onUnmounted, defineComponent, ref } from 'vue';
import { Nav } from '@common/index';

export default defineComponent({
  name: 'App',
  setup() {
    const isLogin = ref('');
    const scaleRef = ref(1);
    const originX = ref('0');
    const originY = ref('0');

    const calcScale = () => {
      const clientWidth = document.documentElement.clientWidth;
      const clientHeight = document.documentElement.clientHeight;
      const widthScale = clientWidth / 1920;
      const heightScale = clientHeight / 1080;

      const baseHeight = heightScale < widthScale; // 是否基于高
      scaleRef.value = baseHeight ? heightScale : widthScale;

      if (baseHeight) {
        originX.value = (clientWidth - 1920 * scaleRef.value) / 2 + 'px';
        originY.value = '0';
      } else {
        originX.value = '0';
        originY.value = (clientHeight - 1080 * scaleRef.value) / 2 + 'px';
      }
    };

    onMounted(() => {
      calcScale();
      window.addEventListener('resize', calcScale, false);
    });

    onUnmounted(() => {
      window.removeEventListener('resize', calcScale);
    });

    return { isLogin, scaleRef, originX, originY };
  },
  render() {
    return (
      <div
        id="Home"
        style={{
          transform: `scale(${this.scaleRef})`,
          transformOrigin: '0 0',
          WebkitTransformOrigin: '0 0',
          top: this.originY,
          left: this.originX,
        }}
      >
        <Nav></Nav>
        <router-view />
      </div>
    );
  },
});
